<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <!-- 必须的 meta 标签 -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>GameHub商城</title>
      <!-- Bootstrap 的 CSS 文件 -->
      <link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
      <link rel="stylesheet" href="${pageContext.request.contextPath}/css/personal.min.css">
      <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
      <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
      <script>
        $(function () {
          $.get("${pageContext.request.contextPath}/address/getProvince", "", function (data) {
            var str = '';
            var $province = $("#container-province")

            for (var key in data) {
              str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
            }
            $province.append(str)
          }, "json")
          $.get("${pageContext.request.contextPath}/address/findByUid", "", function (data) {
            showAddress(data)
          }, "json")

          $.get("${pageContext.request.contextPath}/order/countOrder", "", function (data) {

            var ordernum = 0, totalpay = 0, totalDiscount = 0, gamecount = 0;
            var home_order_str = ""
            $homepagelist = $("#homepage-orderlist")

            for (var i in data) {
              if (data[i].status == 2) {
                ordernum++
                totalpay += data[i].final_price
                totalDiscount += data[i].totalDiscount
                gamecount += data[i].list.length
              }
              if (i < 3) {
                home_order_str += '<li class="rounded">'
                  + '<div class="row m-0 desc">'
                  + '<div class="col-10 p-0 py-3  text-center d-flex align-items-center">'
                  + '<a href="" class="mr-4">'
                  + '<img src="' + data[i].list[0].game_src + '" class="rounded" alt="">'
                  + '</a>'
                  + '<div class="d-flex flex-column align-items-start">'
                  + '<label>' + data[i].list[0].game_name + '...</label>'
                  + '<div class="head">'
                  + '<span>订单号:</span>'
                  + '<a class="order-number px-1 pr-2"  onclick="openDetail(this)" data-orderNum="' + data[i].order_number + '">' + data[i].order_number + '</a>'
                  + '<span>' + getdate(data[i].submit_time) + '</span>'
                  + '</div>'
                  + '</div>'
                  + '</div>'
                  + '<div class="col-2 p-0  text-center d-flex align-items-center">'
                  + '<a onclick="openDetail(this)" data-orderNum="' + data[i].order_number + '">查看详情</a>'
                  + '</div>'
                  + '</div>'
                  + '</li>'
              }
            }
            $homepagelist.html(home_order_str)

            $("#order-count").text(ordernum)
            $("#sum-cost").text(totalpay)
            $("#sum-discount").text(totalDiscount)
            $("#sum-gamecount").text(gamecount)
          }, "json")
          getOrderPage(1)
        })
        var pattern_password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
        var password_old_flag = true; password_new_flag = false; password_confirm_flag = false;
        function showaddr() {
          $("#list-order-list").tab('show')
        }
        function showAddress(data) {
          $ul = $("#address-list");
          str = ""
          for (var i in data) {
            str += '<li class="rounded section">'
                +'<div class="head d-flex justify-content-between" >'
                +'<div class="name">'+data[i].username+'</div>'
                +'<div class="">'
                +'<button type="button" class="close" aria-label="关闭">'
                +'<span class="text-light" aria-hidden="true">&times;</span>'
                +'</button>'
                +'</div>'
                +'</div>'
                +'<div class="desc">'
                +'<div class="d-flex">'
                +'<span class="subtitle">收货人:</span>'
                +'<span class="text username">'+data[i].username+'</span>'
                +'</div>'
                +'</div>'
                +'<div class="desc">'
                +'<div class="d-flex">'
                +'<span class="subtitle">地址:</span>'
                +'<span class="text province">'+data[i].province+'</span>'
                +'<span class="text city">'+data[i].city+'</span>'
                +'<span class="text area">'+data[i].area+'</span>'
                +'<span class="text town">'+data[i].town+'</span>'
                +'<span class="text detail">'+data[i].detailAddr+'</span>'
                +'</div>'
                +'</div>'
                +'<div class="desc">'
                +'<div class="d-flex">'
                +'<span class="subtitle">手机号:</span>'
                +'<span class="text phonenumber">'+data[i].phone+'</span>'
                +'</div>'
                +'</div>'
                +'<div class="desc">'
                +'<div class="d-flex">'
                +'<span class="subtitle">电子邮箱:</span>'
                +'<span class="text email">'+data[i].email+'</span>'
                +'</div>'
                +'</div>'
                +'<div class="link text-right">'
                +'<a href="#" onclick="changeAddress(this)">编辑</a>'
                +'</div>'
                +'</li>'
          }
          $("#addresspage-addrlist").html(str)
        }
        function sumbitAddress() {
          var $provinceid = $("#address-province").val()
          var $cityid = $("#address-city").val()
          var $areaid = $("#address-area").val()
          var $townid = $("#address-town").val()
          var $address = $("#address-detail").val()
          var $name = $("#username").val()
          var $phone = $("#phonenumber").val()
          var $email = $("#email").val()
          alert($provinceid + $cityid + $areaid + $townid + $address + $name + $phone + $email)
          $.get("${pageContext.request.contextPath}/address/add", { "province": $provinceid, "city": $cityid, "area": $areaid, "town": $townid, "detailAddr": $address, "username": $name, "phone": $phone, "email": $email }, function (data) {
            showAddress(data)
            $('#addressModal').modal('hide')
          }, "json")
        }
        function getOrderPage(currentPage) {
          $.get("${pageContext.request.contextPath}/order/findOrderByPage?currentPage=" + currentPage, "", function (data) {
            var totalPage = data.pages
            var list = data.list
            var str = "";
            for (var i in list) {
              str += '<li class="rounded">'
                + '<div class="head">'
                + '<span class = "pr-4" >' + getdate(list[i].submit_time) + '</span>'
                + '<span>订单号:</span>'
                + '<a  onclick=openDetail(this) data-orderNum="' + list[i].order_number + '">' + list[i].order_number + '</a>'
                + '</div>'
                + '<div class="row m-0 desc">'
                + '<div class="col-6  text-center d-flex align-items-center">'
                + '<a href="">'
                + '<img src="' + list[i].list[0].game_src + '" class="rounded" alt="">'
                + '</a>'
                + '<div>' + list[i].list[0].game_name + '等</div>'
                + '</div>'
                + '<div class="col-2  text-center d-flex align-items-center">'
                + '<div class="w-100">' + list[i].useraddress.username + '</div>'
                + '</div>'
                + '<div class="col-2 price  text-center d-flex flex-column justify-content-center align-items-center">'
                + '<div class="w-100">￥' + list[i].final_price + '</div>'
                + '<div class="w-100">支付宝支付</div>'
                + '</div>'
                + '<div class="col-2  text-center d-flex align-items-center">'
                + '<div class="w-100">' + getOrderStatus(list[i].status) + '</div>'
                + '</div>'
                + '</div>'
                + '</li>'
            }
            $("#orderpage-orderlist").html(str)
            var strpage = "";
            for (i = 1; i <= totalPage; i++) {
              strpage += '<li class="page-item" onclick=""><a href="#list-order" onclick="getOrderPage(' + i + ')">' + i + '</a></li>'
            }
            $("#order_pageindex").html(strpage)
          }, "json")
        }
        function getOrderStatus(status) {
          var str = ''
          switch (status) {
            case 0:
              str = '已提交'
              break
            case 1:
              str = '待支付'
              break
            case 2:
              str = '已支付'
              break
            case 3:
              str = '已取消'
              break
          }
          return str
        }
        function getdate(timestamp) {
          var now = new Date(timestamp),
            y = now.getFullYear(),
            m = now.getMonth() + 1,
            d = now.getDate();
          return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        }
        function change(obj) {
          var block = obj.querySelector(".d-block");
          var none = obj.querySelector(".d-none");
          none.setAttribute("class", none.getAttribute("class").replaceAll("d-none", "d-block"));
          block.setAttribute("class", block.getAttribute("class").replaceAll("d-block", "d-none"));
          var input = obj.parentNode.querySelector("input");
          if (none.getAttribute("class").indexOf("slash") !== -1) {
            input.setAttribute("type", "password");
          } else {
            input.setAttribute("type", "text");
          }
        }
        function boxfocus(obj) {
          var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];
          var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
          var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
          div.setAttribute("class", div.getAttribute("class") + " inputactive");
          fieldset.setAttribute("class", fieldset.getAttribute("class").replaceAll(" fieldset-warning", ""));
          fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-focus")
          p.innerHTML = "";
        }
        function boxblur(obj) {
          var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];
          var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
          fieldset.setAttribute("class", fieldset.getAttribute("class").replaceAll(" fieldset-focus", ""));
          var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
          if (!obj.value) {
            fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-warning")
            div.setAttribute("class", div.getAttribute("class").replaceAll(" inputactive", ""));
            switch (obj.id) {
            }
          } else {
            if (obj.id == "password-confirm") {
              if (obj.value != document.getElementById("password-new").value) {
                password_confirm_flag = false;
                p.innerHTML = "前后密码不一致";
                fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-warning")
              } else {
                password_confirm_flag = true;
                if (!check(obj)) {
                  password_flag = false;
                  p.innerHTML = "密码不合法";
                }
                can_submit();
              }


            } else if (!check(obj)) {
              fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-warning")
              switch (obj.id) {
                case "password-new":
                  p.innerHTML = "密码不合法"
                  break;
                case "password-confirm":
                  p.innerHTML = "密码不合法"
                  break;
              }


            } else {
              can_submit();
            }
          }
        }
        function changeAddress(obj) {
          var $li = $(obj).closest("li")
          var $modal = $("#addressModal")
          $modal.find("label").addClass("inputactive")
          $modal.find("#address-province").val($li.find(".province").text())
          $modal.find("#address-city").val($li.find(".city").text())
          $modal.find("#address-area").val($li.find(".area").text())
          $modal.find("#address-town").val($li.find(".town").text())
          $modal.find("#address-detail").val($li.find(".detail").text())
          $modal.find("#username").val($li.find(".username").text())
          $modal.find("#phonenumber").val($li.find(".phonenumber").text())
          $modal.find("#email").val($li.find(".email").text())
          $modal.modal('show')
        }

        function openDetail(obj) {
          $("#list-detail-list").tab('show')
          $orderNum = $(obj).attr("data-orderNum")
          $.get("${pageContext.request.contextPath}/order/getOrder?oid=" + $orderNum, "", function (data) {
            $("#detail-number").text(data.order_number)
            $("#order-condition").text(getOrderStatus(data.status))
            $("#detail-province").text(data.useraddress.province)
            $("#detail-city").text(data.useraddress.city)
            $("#detail-area").text(data.useraddress.area)
            $("#detail-town").text(data.useraddress.town)
            $("#detail-number").text(data.useraddress.phone)
            $("#detail-number").text(data.useraddress.username)
            $("#detail-detailAddr").text(data.useraddress.detailAddr)
            $("#detail-total").text(data.origin_price)
            $("#detail-discount").text(data.totalDiscount)
            $("#detail-pay").text(data.final_price)
            $("")
            var gamelist = data.gamecount
            $ul = $("#detail-orderitems")
            strs = ""
            for (var i in gamelist) {
              strs += '<li class="row details d-flex align-items-center">'
                + '<div class="col-6 d-flex align-items-center">'
                + '<img class="rounded" src="' + data.list[i].game_src + '" alt="">'
                + '<div class="flex-grow-1 text-center  justify-content-center name">' + data.list[i].game_name + '</div>'
                + '</div>'
                + '<div class="col-2 text-center">￥' + gamelist[i].finalprice + '</div>'
                + '<div class="col-2 text-center">￥' + gamelist[i].gamecount + '</div>'
                + '<div class="col-2 text-center">￥' + gamelist[i].finalprice * gamelist[i].gamecount + '</div>'
                + '</li>'
            }
            $ul.html(strs)
          }, "json")
        }
        function can_submit() {
          var button = document.getElementById("button-changepassword")
          if (password_old_flag && password_new_flag && password_confirm_flag) {

            button.removeAttribute("disabled");
          } else {
            button.setAttribute("disabled", "");
          }
        }
        function check(obj) {
          if (!obj.value) {
            return false;
          } else {
            var flag;
            switch (obj.id) {
              case "password-old":
                flag = pattern_password.test(obj.value);
                password_old_flag = flag;
                break;
              case "password-new":
                flag = pattern_password.test(obj.value);
                password_new_flag = flag;
                break;
              case "password-confirm":
                flag = pattern_password.test(obj.value);
                break;
              default:
                flag = true
            }
            return flag;
          }
        }
        function getAddress(obj) {
          $addr = $(obj).closest(".container").attr("id")
          var address = obj.innerHTML;
          var input = obj.parentNode.parentNode.parentNode.getElementsByTagName("input")[0];
          input.value = address;

          switch ($addr) {
            case 'container-province':
              var id = $(obj).attr("data-id")
              var $input = $("#address-province")
              $input.attr("data-id", id)

              var $city = $("#container-city")
              $.get("${pageContext.request.contextPath}/address/getCity", "id=" + id, function (data) {
                var str = '';
                for (var key in data) {
                  str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
                }
                $city.html(str)
              }, "json")
              break
            case 'container-city':
              var id = $(obj).attr("data-id")
              var $input = $("#address-city")
              $input.attr("data-id", id)
              var pid = $("#address-province").attr("data-id")
              var $city = $("#container-area")
              $.get("${pageContext.request.contextPath}/address/getArea?id=" + id + "&pid=" + pid, function (data) {
                var str = '';
                for (var key in data) {
                  str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
                }
                $city.html(str)
              }, "json")
              break
            case 'container-area':
              var id = $(obj).attr("data-id")
              var $input = $("#address-area")
              $input.attr("data-id", id)
              var $city = $("#container-town")
              var pid = $("#address-province").attr("data-id")

              var cid = $("#address-city").attr("data-id")

              $.get("${pageContext.request.contextPath}/address/getTown?id=" + id + "&pid=" + pid + "&cid=" + cid, function (data) {
                var str = '';
                for (var key in data) {
                  str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
                }
                $city.html(str)
              }, "json")
              break
          }

        }
		function uploadheader() {
			$.ajax({
				url:'${pageContext.request.contextPath}/upload/uploadHeader',
        type:'post',
        enctype:"multipart/form-data",
        success:function(data){
          alert(data)
        }
			})
		}

        function initFileInput(ctrlName, uploadUrl) {
          var control = $('#' + ctrlName);
          control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl,  //上传地址
            showUplolse, //是否显示上传按钮
            showRemove: true,
            dropZoneEnabled: false,
            showCaption: true,//是否显示标题
            allowedPreviewTypes: ['image'],
            allowedFileTypes: ['image'],
            allowedFileExtensions: ['jpg', 'png'],
            maxFileSize: 2000,
            maxFileCount: 1,
            //initialPreview: [ 
            //预览图片的设置
            //      "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061                       477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
            //],

          }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
          })
            .on("fileuploaded", function (event, data) {
              $("#path").attr(ta.response);
            });
        }


      </script>
    </head>

    <body>
      <!-- 头部导航标签 -->
      <nav class="navbar navbar-expand-lg ">
        <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px"
            class="d-inline-block align-top"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
          aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">榜单</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">帮助</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">常见问题</a>
            </li>
          </ul>
          <a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          <c:if test="${empty user}">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
        </div>
      </nav>
      <!-- 搜索和商城导航栏 -->
      <div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
        <div class="row px-0">
          <div class="col-md-1"></div>
          <nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
            <a class="navbar-brand" href="#">
              <div class="input-group">
                <div class="input-group-prepend">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-search" viewBox="0 0 16 16">
                    <path
                      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                  </svg>
                  <!-- <span class="input-group-text" id="basic-addon1">@</span> -->
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                  aria-describedby="basic-addon1">
              </div>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
              aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">浏览</a>
                </li>
              </ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
            </div>
          </nav>
          <div class="col-md-1"></div>
        </div>
      </div>
      <main class="container mx-auto px-0 ">
        <div class="row px-0 ">
          <div class="col-1"></div>
          <!-- 页面主体 -->
          <div class="col-10">

            <div class="row personal d-flex flex-row">

              <aside class="flex-shrink-0">
                <div class="list-group" id="list-tab" role="tablist">
                  <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
                    href="#list-home" role="tab" aria-controls="home">个人首页</a>
                  <a class="list-group-item list-group-item-action" id="list-order-list" data-toggle="list"
                    href="#list-order" role="tab" aria-controls="home">我的订单</a>
                  <a class="list-group-item list-group-item-action d-none" id="list-detail-list" data-toggle="list"
                    href="#list-detail" role="tab" aria-controls="home">订单详情</a>
                  <a class="list-group-item list-group-item-action " id="list-address-list" data-toggle="list"
                    href="#list-address" role="tab" aria-controls="profile">地址管理</a>
                  <a class="list-group-item list-group-item-action" id="list-head-list" data-toggle="list"
                    href="#list-head" role="tab" aria-controls="messages">更改头像</a>
                  <a class="list-group-item list-group-item-action" id="list-password-list" data-toggle="list"
                    href="#list-password" role="tab" aria-controls="settings">更改密码</a>
                </div>

              </aside>
              <main class="flex-grow-1 rounded">
                <div class="tab-content rounded" id="nav-tabContent">
                  <!-- 个人中心首页 -->
                  <div class="tab-pane fade rounded show active" id="list-home" role="tabpanel"
                    aria-labelledby="list-home-list">
                    <div class="d-flex headbanner rounded">

                      <div class=" head-img">

                      </div>
                      <div class="details flex-grow-1 d-flex flex-column justify-content-center">
                        <h3 class="w-100 headtitle">个人资料</h3>
                        <div class="desc d-flex justify-content-between">
                          <div>
                            <span id="order-count">10</span>
                            <div>订单数</div>
                          </div>
                          <div>
                            <span id="sum-cost">￥1222.32</span>
                            <div>累计消费</div>
                          </div>
                          <div>
                            <span id="sum-discount">￥1221</span>
                            <div>累计优惠</div>
                          </div>
                          <div>
                            <span id="sum-gamecount">32</span>
                            <div>游戏总数</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <p> </p>
                    <div class="d-flex orders rounded">
                      <div class="details w-100">
                        <div class="title">我的订单</div>
                        <div class="logos d-flex justify-content-between" id="homepage-iconlist">
                          <a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                              class="bi bi-wallet2" viewBox="0 0 16 16">
                              <path
                                d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z" />
                            </svg>
                            <div class="text-center">待付款</div>
                          </a>
                          <a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                              class="bi bi-box2" viewBox="0 0 16 16">
                              <path
                                d="M2.95.4a1 1 0 0 1 .8-.4h8.5a1 1 0 0 1 .8.4l2.85 3.8a.5.5 0 0 1 .1.3V15a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4.5a.5.5 0 0 1 .1-.3L2.95.4ZM7.5 1H3.75L1.5 4h6V1Zm1 0v3h6l-2.25-3H8.5ZM15 5H1v10h14V5Z" />
                            </svg>
                            <div class="text-center">待收货</div>
                          </a>
                          <a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                              class="bi bi-envelope" viewBox="0 0 16 16">
                              <path
                                d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
                            </svg>
                            <div class="text-center">待评价</div>
                          </a>
                          <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                              class="bi bi-shield-check" viewBox="0 0 16 16">
                              <path
                                d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
                              <path
                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                            </svg>
                            <div class="text-center">售后申请</div>
                          </a>
                          <a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor"
                              class="bi bi-arrow-right-square" viewBox="0 0 16 16">
                              <path fill-rule="evenodd"
                                d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
                            </svg>
                            <div class="text-center">全部订单</div>
                          </a>
                        </div>
                        <ul class="items" id="homepage-orderlist">
                          <li class="rounded">

                            <div class="row m-0 desc">
                              <div class="col-10 p-0 py-3  text-center d-flex align-items-center">
                                <a href="" class="mr-4">
                                  <img
                                    src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                    class="rounded" alt="">
                                </a>
                                <div class="d-flex flex-column align-items-start">
                                  <label>Not tonight</label>
                                  <div class="head">
                                    <span>订单号:</span>
                                    <a class="order-number px-1 pr-2" href="">23333333333</a>
                                    <span>2022-02-22 22:22:22</span>

                                  </div>
                                </div>
                              </div>
                              <div class="col-2 p-0  text-center d-flex align-items-center">
                                <a href="" class="w-100 text-right">查看详情</a>
                              </div>
                            </div>
                          </li>
                          <li class="rounded">

                            <div class="row m-0 desc">
                              <div class="col-10 p-0 py-3  text-center d-flex align-items-center">
                                <a href="" class="mr-4">
                                  <img
                                    src="../img/EGS_NotTonight2_PanicBarn_S2_1200x1600-72478a362c4d83817ac810f6a73dd7c9.jfif"
                                    class="rounded" alt="">
                                </a>
                                <div class="d-flex flex-column align-items-start">
                                  <label>Not tonight</label>
                                  <div class="head">
                                    <span>订单号:</span>
                                    <a id="list-detail-list" data-toggle="list" href="#list-detail" role="tab"
                                      aria-controls="settings" onfocus="openDetail(this)">123214</a>
                                    <span>2022-02-22 22:22:22</span>

                                  </div>
                                </div>
                              </div>
                              <div class="col-2 p-0 text-center d-flex align-items-center">
                                <a class="w-100 text-right">查看详情</a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- 我的订单 -->
                  <div class="tab-pane fade rounded" id="list-order" role="tabpanel" aria-labelledby="list-order-list">
                    <aside class="w-100 rounded">
                      我的订单
                    </aside>
                    <section class="rounded">

                      <div class="table-title d-flex flex-row justify-content-between align-items-center">
                        <div class="d-flex">
                          <div>全部订单</div>
                          <div>待付款</div>
                          <div>待评价</div>
                          <div>已完成</div>

                        </div>
                      </div>


                      <div class="row m-0 class rounded">
                        <div class="col-6 text-center">订单详情</div>
                        <div class="col-2 text-center">收货人</div>
                        <div class="col-2 text-center">金额</div>
                        <div class="col-2 text-center">全部状态</div>
                      </div>
                      <ul class="orderpage-orderlist" id="orderpage-orderlist">
                      </ul>
                      <nav aria-label="Page navigation example bg-transparent">
                        <ul class="pagination justify-content-center bg-transparent" id="order_pageindex">

                        </ul>
                      </nav>
                    </section>

                  </div>
                  <!-- 地址管理 -->
                  <div class="tab-pane fade rounded" id="list-address" role="tabpanel"
                    aria-labelledby="list-address-list">
                    <aside class="w-100 rounded">
                      地址管理
                    </aside>
                    <div class="address rounded">
                      <div class="top">
                        <button class="btn btn-primary" data-toggle="modal" data-target="#addressModal">新增收货地址</button>
                      </div>


                      <!-- Modal -->
                      <div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                          <div class="modal-content bg-dark">
                            <div class="modal-header">
                              <h5 class="modal-title" id="addressModalLabel">新增收货地址</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body main">
                              <!-- 地址表单 -->
                              <form action="" class="d-flex flex-column align-items-center justify-content-between p-4">
                                <div class="d-flex mb-4">
                                  <!-- 省选择框 -->
                                  <div class="dropdown">
                                    <section id="province-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
                                      onblur="boxblur(this)">
                                      <div class="position-relative input" id="func">
                                        <label for="address-province" class="position-absolute label inputactive"
                                          id="label-province">省/直辖市</label>
                                        <div class="position-relative">
                                          <input id="address-province" type="text" class="dropdown-toggle"
                                            name="address-province" data-id="">
                                          <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                        </div>
                                      </div>
                                      <p class="position-absolute"></p>
                                      <div class="dropdown-menu p-0 m-0" aria-labelledby="province-dropdownMenu">
                                        <div class="container p-0 m-0 rounded" id="container-province">
                                        </div>
                                      </div>
                                    </section>

                                  </div>
                                  <!-- 市选择框 -->
                                  <div class="dropdown">
                                    <section id="city-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
                                      onblur="boxblur(this)">
                                      <div class="position-relative input" id="func">
                                        <label for="address-city" class="position-absolute label inputactive"
                                          id="label-city">市</label>
                                        <div class="position-relative">
                                          <input id="address-city" type="text" class="dropdown-toggle"
                                            name="address-city" data-id="">
                                          <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                        </div>
                                      </div>
                                      <p class="position-absolute"></p>
                                      <div class="dropdown-menu p-0 m-0" aria-labelledby="city-dropdownMenu">
                                        <div class="container p-0 m-0 rounded" id="container-city">
                                        </div>
                                      </div>
                                    </section>

                                  </div>
                                </div>
                                <div class="d-flex mb-4">
                                  <!-- 区县选择框 -->
                                  <div class="dropdown">
                                    <section id="district-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
                                      onblur="boxblur(this)">
                                      <div class="position-relative input" id="func">
                                        <label for="address-district" class="position-absolute label inputactive"
                                          id="label-district">区/县</label>
                                        <div class="position-relative">
                                          <input id="address-area" type="text" class="dropdown-toggle"
                                            name="address-district" data-id="">
                                          <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                        </div>
                                      </div>
                                      <p class="position-absolute"></p>
                                      <div class="dropdown-menu p-0 m-0" aria-labelledby="district-dropdownMenu">
                                        <div class="container p-0 m-0 rounded" id="container-area">

                                        </div>
                                      </div>
                                    </section>

                                  </div>
                                  <!-- 街道选择框 -->
                                  <div class="dropdown">
                                    <section id="district-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
                                      onblur="boxblur(this)">
                                      <div class="position-relative input" id="func">
                                        <label for="address-district" class="position-absolute label inputactive"
                                          id="label-district">街道</label>
                                        <div class="position-relative">
                                          <input id="address-town" type="text" class="dropdown-toggle"
                                            name="address-district" data-id="">
                                          <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                        </div>
                                      </div>
                                      <p class="position-absolute"></p>
                                      <div class="dropdown-menu p-0 m-0" aria-labelledby="district-dropdownMenu">
                                        <div class="container p-0 m-0 rounded" id="container-town">
                                        </div>
                                      </div>
                                    </section>

                                  </div>
                                </div>
                                <section class="mb-4">
                                  <div class="position-relative input" id="func">
                                    <label for="address-detail" class="position-absolute label"
                                      id="address-detail-id">详细地址</label>
                                    <div class="position-relative">
                                      <input id="address-detail" type="text" name="address-detail"
                                        onclick="boxfocus(this)" onblur="boxblur(this)">
                                      <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                    </div>
                                  </div>
                                  <p class="position-absolute" style="color: #DE3341;"></p>
                                </section>
                                <section class="mb-4">
                                  <div class="position-relative input" id="func">
                                    <label for="address" class="position-absolute label" id="labelid">收货人</label>
                                    <div class="position-relative">
                                      <input id="username" type="text" name="username" onclick="boxfocus(this)"
                                        onblur="boxblur(this)">
                                      <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                    </div>
                                  </div>
                                  <p class="position-absolute" style="color: #DE3341;"></p>
                                </section>
                                <section class="mb-4">
                                  <div class="position-relative input">
                                    <label for="email" class="position-absolute label" id="labelid">手机号</label>
                                    <div class="position-relative">
                                      <input id="phonenumber" type="number" name="phonenumber" onfocus="boxfocus(this)"
                                        onblur="boxblur(this)">
                                      <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                    </div>
                                  </div>
                                  <p class="position-absolute" style="color: #DE3341;"></p>
                                </section>
                                <section class="mb-4">
                                  <div class="position-relative input">
                                    <label for="email" class="position-absolute label" id="labelid">电子邮箱</label>
                                    <div class="position-relative">
                                      <input id="email" type="email" name="email" onfocus="boxfocus(this)"
                                        onblur="boxblur(this)">
                                      <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                                    </div>
                                  </div>
                                  <p class="position-absolute" style="color: #DE3341;"></p>
                                </section>


                              </form>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                              <button type="button" class="btn btn-primary" onclick="sumbitAddress()">保存地址</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <ul id="addresspage-addrlist">
                        <li class="rounded section">
                          <div class="head d-flex justify-content-between">
                            <div class="name">
                              小刘
                            </div>
                            <div class="">
                              <button type="button" class="close" aria-label="关闭">
                                <span class="text-light" aria-hidden="true">&times;</span>
                              </button>
                            </div>
                          </div>
                          <div class="desc">
                            <div class="d-flex">
                              <span class="subtitle">收货人:</span>
                              <span class="text username">小刘</span>
                            </div>
                          </div>
                          <div class="desc">
                            <div class="d-flex">
                              <span class="subtitle">地址:</span>
                              <span class="text province">四川省</span>
                              <span class="text city">成都市</span>
                              <span class="text area">高新区</span>
                              <span class="text town">蜗牛路28号</span>
                              <span class="text detail">蜗牛学院</span>
                            </div>
                          </div>
                          <div class="desc">
                            <div class="d-flex">
                              <span class="subtitle">手机号:</span>
                              <span class="text phonenumber">14523332333</span>
                            </div>
                          </div>
                          <div class="desc">
                            <div class="d-flex">
                              <span class="subtitle">电子邮箱:</span>
                              <span class="text email">123@gmail.com</span>
                            </div>
                          </div>
                          <div class="link text-right">
                            <a href="#" onclick="changeAddress(this)">编辑</a>
                          </div>


                        </li>


                      </ul>
                    </div>
                  </div>
                  <!-- 修改头像 -->
                  <div class="tab-pane fade rounded " id="list-head" role="tabpanel" aria-labelledby="list-head-list">
                    <aside class="rounded w-100">修改头像</aside>
                    <section class="rounded" id="header-upload">
                      <form action="${pageContext.request.contextPath}/upload/uploadHeader" method="post" enctype="multipart/form-data"
                        class="bg-transparent d-flex flex-column align-items-center">
                        <div id="img-container"></div>
                        <input type="file" name="image" class="projectfile" value="${deal.image}" />
                        <button type="submit" class="p-5">芜湖起飞</button>
                      </form>

                    </section>
                  </div>
                  <!-- 更改密码 -->
                  <div class="tab-pane fade rounded " id="list-password" role="tabpanel"
                    aria-labelledby="list-password-list">
                    <aside class="rounded w-100">更改密码</aside>
                    <div class="main position-relative">
                      <form action="" class="d-flex flex-column align-items-center justify-content-between w-auto">

                        <section>
                          <div class="position-relative input box">
                            <label for="password-old" class="position-absolute label" id="labelid">密码</label>
                            <div class="position-relative  d-flex">
                              <input id="password-old" class="flex-grow-1" type="password" name="password"
                                onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative"
                                onclick="change(this)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-fill position-absolute d-none" viewBox="0 0 16 16">
                                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                  <path
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-slash-fill position-absolute d-block" viewBox="0 0 16 16">
                                  <path
                                    d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
                                  <path
                                    d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                              </div>

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-exclamation-square" viewBox="0 0 16 16">
                                  <path
                                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                  <path
                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
                                </svg>
                                <div class="tips position-absolute rounded">密码至少为8位，并且至少包含1个数字、1个大写字母和1个小写字母</div>
                              </div>
                              <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                            </div>
                          </div>
                          <p class="position-absolute warning"></p>
                        </section>
                        <section>
                          <div class="position-relative input box">
                            <label for="password-new" class="position-absolute label" id="labelid">密码</label>
                            <div class="position-relative  d-flex">
                              <input id="password-new" class="flex-grow-1" type="password" name="password"
                                onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative"
                                onclick="change(this)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-fill position-absolute d-none" viewBox="0 0 16 16">
                                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                  <path
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-slash-fill position-absolute d-block" viewBox="0 0 16 16">
                                  <path
                                    d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
                                  <path
                                    d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                              </div>

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-exclamation-square" viewBox="0 0 16 16">
                                  <path
                                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                  <path
                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
                                </svg>
                                <div class="tips position-absolute rounded">密码至少为8位，并且至少包含1个数字、1个大写字母和1个小写字母</div>
                              </div>
                              <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                            </div>
                          </div>
                          <p class="position-absolute warning"></p>
                        </section>
                        <section>
                          <div class="position-relative input box">
                            <label for="password-confirm" class="position-absolute label" id="labelid">密码</label>
                            <div class="position-relative  d-flex">
                              <input id="password-confirm" class="flex-grow-1" type="password" name="password"
                                onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative"
                                onclick="change(this)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-fill position-absolute d-none" viewBox="0 0 16 16">
                                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                  <path
                                    d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-eye-slash-fill position-absolute d-block" viewBox="0 0 16 16">
                                  <path
                                    d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
                                  <path
                                    d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                              </div>

                              <div
                                class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                  class="bi bi-exclamation-square" viewBox="0 0 16 16">
                                  <path
                                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                  <path
                                    d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
                                </svg>
                                <div class="tips position-absolute rounded">密码至少为8位，并且至少包含1个数字、1个大写字母和1个小写字母</div>
                              </div>
                              <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                            </div>
                          </div>
                          <p class="position-absolute warning"></p>
                        </section>

                        <button class="btn btn-primary regestbutton" id="button-changepassword" onclick="changePassword()" disabled>
                          立即修改
                        </button>
                      </form>
                    </div>
                  </div>
                  <!-- 订单详情 -->
                  <div class="tab-pane fade rounded  " id="list-detail" role="tabpanel"
                    aria-labelledby="list-detail-list">
                    <aside class="rounded w-100">订单详情</aside>
                    <div class="main rounded">
                      <div class="row desc">
                        <div class="col d-flex flex-column align-items-center">
                          <div class="number">
                            <label for="">订单号：</label>
                            <span id="detail-number">2323232</span>
                          </div>
                          <div class="condition" id="order-condition">
                            完成
                          </div>
                        </div>
                        <div class="col d-flex flex-column receive">
                          <label for="">收货人信息</label>
                          <div class="d-flex">
                            <span>收货人：</span>
                            <div class="text-left" id="detail-username">小刘</div>
                          </div>
                          <div class="d-flex">
                            <span>地址：</span>
                            <div class="text-left">
                              <span id="detail-province"></span>
                              <span id="detail-city"></span>
                              <span id="detail-area"></span>
                              <span id="detail-town"></span>
                              <span id="detailpage-addr"></span>
                            </div>
                          </div>
                          <div class="d-flex">
                            <span>电话号码：</span>
                            <div class="text-left" id="detail-number">12312412421</div>
                          </div>

                        </div>
                        <div class="col d-flex flex-column receive">
                          <label for="">付款信息</label>
                          <div class="d-flex">
                            <span>付款方式：</span>
                            <div class="text-left">AliPay</div>
                          </div>
                          <div class="d-flex">
                            <span>付款时间：</span>
                            <div class="text-left">2022-03-07 19:50</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="main rounded">
                      <div class="row head">
                        <div class="col-6 text-center">商品</div>
                        <div class="col-2 text-center">单价</div>
                        <div class="col-2 text-center">数量</div>
                        <div class="col-2 text-center">小计</div>
                      </div>
                      <ul id="detail-orderitems">
                        <li class="row details d-flex align-items-center">
                          <div class="col-6 d-flex align-items-center">
                            <img class="rounded" src="../img/egs-sifu-thumb-1200x1600-1200x1600-7ddce9416e82.png"
                              alt="">
                            <div class="flex-grow-1 text-center  justify-content-center name">SIFU</div>
                          </div>
                          <div class="col-2 text-center">￥132</div>
                          <div class="col-2 text-center">￥132</div>
                          <div class="col-2 text-center">申请售后</div>
                        </li>
                      </ul>

                      <section class="row d-flex justify-content-end">

                        <div class="prices d-flex flex-column">
                          <div class="d-flex justify-content-between">

                            <label for="">商品总额：</label>
                            <span>￥233</span>
                          </div>
                          <div class="d-flex justify-content-between">

                            <label for="">商品优惠：</label>
                            <span>￥233</span>
                          </div>
                          <div class="d-flex justify-content-between">

                            <label for="">实付款：</label>
                            <span>￥233</span>
                          </div>
                        </div>
                      </section>
                    </div>
                  </div>
                </div>

              </main>

            </div>

          </div>

          <div class="col-1"></div>
        </div>
      </main>
    </body>

    </html>